<template>
  <div>
    <!-- 编辑/新增弹窗 -->
    <el-dialog
      :model-value="visible"
      :title="isEdit ? '编辑事项' : '新增事项'"
      width="500px"
      :append-to-body="true"
      :before-close="handleBeforeClose"
      :align-center="true"
      :destroy-on-close="true"
    >
      <el-form :label-width="100" :model="form" :rules="rules" ref="formRef">
        <el-form-item label="事项标题" prop="title">
          <el-input
            v-model="form.title"
            type="text"
            placeholder="请输入待办事项标题"
          />
        </el-form-item>
        <el-form-item label="事项描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            placeholder="请输入待办事项描述"
          />
        </el-form-item>
        <el-form-item label="截至时间" prop="dueDate">
          <el-input
            v-model="form.dueDate"
            type="textarea"
            :rows="3"
            placeholder="请输入待办事项描述"
          />
        </el-form-item>
        <el-form-item label="当前状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option
              v-for="(desc, key) in statusMap"
              :key="key"
              :label="desc.text"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="form.priority" placeholder="请选择优先级">
            <el-option
              v-for="(desc, key) in priorityMap"
              :key="key"
              :label="desc.text"
              :value="key"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="emit('change', false)">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from "vue";
const props = defineProps({
  visible: { type: Boolean, default: false },
  isEdit: { type: Boolean, default: false },
  statusMap: Object,
  priorityMap: Object,
});

const emit = defineEmits(["change"]);

const form = ref({
  id: null,
  title: "",
  description: "",
  status: "pending",
  priority: "medium",
});
const formRef = ref(null);

// 表单验证规则
const rules = {
  title: [
    {
      required: true,
      message: "请输入事项标题",
      trigger: "blur",
    },
    { min: 1, max: 50, message: "长度在1到50个字符", trigger: "blur" },
  ],
  description: [
    { required: true, message: "请输入事项内容", trigger: "blur" },
    { min: 3, max: 100, message: "长度在3到100个字符", trigger: "blur" },
  ],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
  priority: [{ required: true, message: "请选择优先级", trigger: "change" }],
};

// 处理关闭前
const handleBeforeClose = (done) => {
  emit("change", false);
};

// 提交表单
const handleSubmit = async () => {
  await formRef.value.validate();

  if (isEdit) {
    // 更新已有项
    const index = todoList.value.findIndex((i) => i.id === form.value.id);
    if (index > -1) {
      todoList.value.splice(index, 1, form.value);
    }
  } else {
    // 新增项
    todoList.value.push({
      ...form.value,
      id: Date.now(),
      createdAt: new Date().toISOString(),
    });
  }

  visible = false;
};
</script>

<style scoped></style>
